import { memo } from 'react';
import type { FC } from 'react';
import NavMenuItem from '../NavMenuItem';
import styles from './index.module.less';

const NavMenuGroup: FC<NavMenuGroup.Props> = (props) => {
  const { items, onItemClicked, activeId } = props;
  return (
    <div className={styles.container}>
      {items.map((item) => (
        <NavMenuItem
          key={item.id}
          id={item.id}
          text={item.text}
          active={activeId === item.id}
          onClick={onItemClicked}
          icon={item.icon}
          color={item.color}
        />
      ))}
    </div>
  );
};

export default memo(NavMenuGroup);
